import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';

export const checkStyle = style({
	display: 'inline-flex',
	backgroundColor: 'transparent',
	border: 'none',
	padding: '0',
	margin: '0 0.2em',
	verticalAlign: 'middle',
	flexDirection: 'row',
	alignItems: 'center',
	cursor: 'pointer',
	color: vars.color.regularText,
	fontSize: '1rem',
	selectors: {
		'&[disabled]': {
			cursor: 'not-allowed',
			color: vars.color.disabledText,
		},
	},
});

globalStyle(`${checkStyle} svg`, {
	flexShrink: '0',
	width: '1.8rem',
	height: '1.8rem',
	fill: vars.color.secondaryText,
});

globalStyle(`${checkStyle} span`, {
	marginLeft: '0.3rem',
});

globalStyle(`${checkStyle}[checked=half] svg`, {
	fill: vars.color.brand,
});

globalStyle(`${checkStyle}[checked=true] svg`, {
	fill: vars.color.brand,
});

globalStyle(`${checkStyle}[disabled] svg`, {
	fill: vars.color.disabledText,
});
